<template>
	<view class="mydetail-body">
		<tn-tabs :list="scrollList" :current="currentTab" :showBar="false" @change="tabChange"></tn-tabs>
		<view class="tn-padding-left tn-padding-right tn-padding-bottom-sm">
			<view class="tn-flex tn-flex-row-between tn-flex-col-center">
				<view class="justify-content-item tn-flex-1 tn-padding-right-sm">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<tn-input class="" type="text" :height="60" v-model="huifuStr" placeholder="请输入幼儿姓名" border></tn-input>
					</view>
				</view>
				<view class="justify-content-item ">
					<view class="tn-flex tn-flex-col-center tn-flex-row-right">
						<tn-button shape="round" @click="sousuoyouer" :backgroundColor="'#01BEFF'" fontColor="#ffffff">搜索</tn-button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tn-safe-area-inset-bottom tn-margin-bottom-sm tn-padding-left-sm tn-padding-right-sm">
          <tn-list-cell v-for="(item,index) in youerList" :key="index" :name="index">
		      <view class="tn-flex tn-flex-row-between tn-flex-col-center">
		        <view class="justify-content-item tn-flex-1">
		          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		            <view class="logo-pic">
		              <view class="logo-image">
						  <tn-avatar size="lg" src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
		              </view>
		            </view>
		            <view class="tn-padding-right tn-color-black">
		              <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		                {{item.name}}
		              </view>
		              <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
		                <text class="tn-color-grey tn-padding-right-sm">{{genders[item.gender]}}</text>
		                <text class="tn-color-grey">{{item.age}}</text>
		              </view>
		            </view>
		          </view>
		        </view>
		        <view class="justify-content-item tn-flex tn-flex-row-between">
		          <view class="">
					  	<tn-button backgroundColor="#A4E82F" fontColor="#FFFFFF" shape="round" size="sm" @click="showtnmodal = true">
					  		离班
					  	</tn-button>
		          </view>
		          <view class="tn-padding-left">
						<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" shape="round" size="sm" @click="goDetailPage(item)">
						  详情
						</tn-button>
		          </view>
		        </view>
		      </view>
		    </tn-list-cell>
		</view>
		<tn-modal
		  v-model="showtnmodal"
		  :radius="10"
		  title="确定离班？"
		  content="离班后，幼儿状态变为未入班状态"
		  :button="button"
		  :maskCloseable="true"
		  @click="clickBtn"
		>
		</tn-modal>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default{
		name: 'youerliebiao',
		data(){
			return {
				currentTab: 0,
				options: [
				  {
					text: '离班',
					style: {
					  backgroundColor: '#E83A30',
					  width: '80rpx',
					  height: '80rpx',
					  margin: '0 12rpx',
					  borderRadius: '100rpx'
					}
				  },
				  {
					text: '详情',
					style: {
					  backgroundColor: 'rgb(1, 190, 255)',
					  width: '80rpx',
					  height: '80rpx',
					  margin: '0 12rpx',
					  borderRadius: '100rpx'
					}
				  }
				],
				scrollList: [
					
				],
				huifuStr: '',
				genders:{
					0: '未知',
					1: '男',
					2: '女'
				},
				youerList: [],
				button:[
				  {
					text: '取消',
					backgroundColor: '#A4E82F',
					fontColor: '#FFFFFF'
				  },
				  {
					text: '确定',
					backgroundColor: 'tn-bg-indigo',
					fontColor: '#FFFFFF'
				  }
				],
				showtnmodal: false,
				pageIndex: 1,
				classId: '',
			}
		},
		onShow() {
			this.pageIndex = 1;
			this.classId = '';
			this.currentTab = 0;
			this.getbanjiFenlei();
			
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.getChildrens();
			console.log('下拉刷新------')
		},
		onReachBottom() {
			// this.getMoreList();
			this.pageIndex++;
			this.getChildrens();
			console.log('上啦更多-------')
		},
		methods:{
			tabChange(tab){
				this.currentTab = tab;
				this.classId = this.scrollList[this.currentTab].id;
				this.getChildrens();
			},
			sousuoyouer(){
				this.pageIndex = 1
				this.getChildrens();
				
			},
			
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.scrollList = res.data;
						if(this.scrollList.length){
							this.classId = this.scrollList[0].id;
							this.getChildrens();
						}
					}
				})
			},
			getChildrens(){//Children/MobilePage
					this.request({
						url: '/Children/MobilePage',
						method: 'get',
						params: {
							pageNo: this.pageIndex,
							pageSize: 10,
							ClassId: this.classId,
							ChildName: this.huifuStr,
						},
					}).then(res => {
						if(res.code == 200 && res.data){
								if(this.pageIndex == 1){
									this.youerList = [];
								}
								let rows = res.data.rows;
								rows.forEach(item => {
									this.youerList.push(item);
								})
								uni.stopPullDownRefresh()
								if((!rows.length || rows.length < 10) && this.pageIndex > 1){
									this.pageIndex--;
									this.$refs.toast.show({
									  title: '',
									  content: '没有更多了',
									  icon: '',
									  image: '',
									  duration: 1000
									})
								}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: res.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
					})
			},
		    clickBtn(event) {
				this.showtnmodal = false
				if(event.index == 1){
					this.$t.message.toast('点击了确定个按钮')
				}
		    },
			goDetailPage(item){
				uni.setStorageSync('childInfo', item)
				uni.setStorageSync('banjiliebiao', this.scrollList)
				uni.navigateTo({
					url: '/pages/shouye/youerxiangqing'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mydetail-body{
		
		min-height: 100vh;
			  background-color: rgba(245, 245, 245, 1);
			  overflow-y: auto;
	}
	
</style>